<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html {
            color: #fff;
            font-size: 14px;
        }
        
        .container {
            text-align: center;
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
            padding: 15px 5px;
            background-color: rgba(0, 0, 0, 0.3);
            height: 100%;
            position: absolute;
        }
        
        .hongbao {
            height: 450px;
            width: 300px;
            background: #A5423A;
            border-radius: 10px;
            margin: 0 auto;
        }
        
        .topcontent {
            height: 280px;
            background-color: #BD503A;
            border: 1px solid #BD503A;
            border-radius: 10px 10px 50% 50%/10px 10px 15% 15%;
            box-shadow: 0px 4px 0px -1px rgba(0, 0, 0, 0.2);
        }
        
        .avatar {
            position: relative;
        }
        
        .avatar span {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 2em;
            font-weight: bolder;
            color: rgba(0, 0, 0, 0.5);
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        
        .avatar img {
            border: 1px solid #BD503A;
            border-radius: 50%;
            overflow: hidden;
            margin-top: 10%;
        }
        
        .topcontent h2 {
            margin: 15px 0;
        }
        
        .text {
            color: #999999;
        }
        
        .desscription {
            margin: 15px 0;
            font-size: 16px;
            font-weight: 600;
        }
        
        #chai {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #ffA73A;
            background-color: #FFA73A;
            border-radius: 50%;
            color: #fff;
            font-size: 20px;
            margin-top: -50px;
        }
        
        #chai span {
            display: inline-block;
            margin-top: 35px;
        }
        
        .rotate {
            -webkit-animation: anim .6s infinite alternate;
            -ms-animation: anim .6s infinite alternate;
            animation: anim .6s infinite alternate;
        }
        
        @-webkit-keyframes anim {
            from {
                -webkit-transform: rotateY(180deg);
            }
            to {
                -webkit-transform: rotateY(360deg);
            }
        }
        
        @-ms-keyframes anim {
            from {
                -webkit-transform: rotateY(180deg);
            }
            to {
                -webkit-transform: rotateY(360deg);
            }
        }
        
        @keyframes anim {
            from {
                -webkit-transform: rotateY(180deg);
            }
            to {
                -webkit-transform: rotateY(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="container" id="container">
        <div class="hongbao">
            <div class="topcontent">
                <div class="avatar">
                    <img src="http://placehold.it/80x80" alt="" width="80px" height="80px" />
                    <span id="close">+</span>
                </div>
                <h2>老罗</h2>
                <span class="text">给你发了一个红包</span>
                <div class="desscription">恭喜发财 大吉大利</div>
            </div>
            <div class="chai" id="chai">
                <span>拆红包</span>
            </div>
        </div>
    </div>
    <script>
        var oChai = document.getElementById("chai");
        var oClose = document.getElementById("close");
        var oContainer = document.getElementById("container");
        oChai.onclick = function() {
            this.setAttribute("class", "rotate");
        }
        oClose.onclick = function() {
            oContainer.style.display = "none";
        }
    </script>
</body>

</html>